<template>
	<view class="container">
		<!-- 所有分区详情 - 提交申请页面 -->
		<u-navbar :is-back="true" :border-bottom="flase" :title="navbarTitle" title-color="#fff" :title-size="40"
			backIconColor="#fff"></u-navbar>
		<view class="content">
			<view class="content_box">
				<form bindsubmit="formSubmit">
					<view class='list'>
						<view class='one'>
							<view class="mandatory">
								<span class="red">*</span>
								<text>标题 :</text>
							</view>
							<input name="nl" type='text' v-model="addressData.title"
								placeholder-class="placeholder"></input>
						</view>
						<view class='one'>
							<view class="mandatory">
								<span class="red">*</span>
								<text>描述 :</text>
							</view>
							<input name="nl" type='text' v-model="addressData.description"
								placeholder-class="placeholder"></input>
						</view>
						<view class='one' v-if="app_id==4||app_id==5||app_id==13">
							<!-- 4、5、13需要金额（显示金额输入框） -->
							<view class="mandatory">
								<span class="red">*</span>
								<text>金额:</text>
							</view>
							<input name="nl" type='number' v-model="addressData.money" placeholder-class="placeholder"
								@input="IntInput"></input>
						</view>
						<view class="image">
							<view class="flex subImg">
								<view class="mandatory">
									<span class="red Colorless">*</span>
									<text class="picture">图片:</text>
								</view>
								<view @click="submitImage">
									<u-icon name="arrow-upward" color="#80AEF7" size="35"></u-icon>点击上传
								</view>
							</view>
							<view class="pictures_show">
								<view class="six_view_img" v-for="(item,index) in filesList" :key="index">
									<image :src="item" @click="previewImage"></image>
									<u-icon name="close-circle" color="#606266" size="35" @click="deleteImage(item)">
									</u-icon>
								</view>
								<view class="choose_picture" @click="choosePicture" v-if="filesList.length!=6">
									<u-icon name="plus" color="#606266" size="80"></u-icon>
									选择图片
								</view>
							</view>
						</view>
						<view class="image">
							<view class="flex subImg">
								<view class="mandatory">
									<span class="red Colorless">*</span>
									<text class="picture">文件:</text>
								</view>
								<view class="limit" @click="showHidePrompt">
									查看拒绝上传类型<u-icon name="question-circle" color="#F08C50" size="28"></u-icon>
								</view>
								<view @click="subFile">
									<u-icon name="arrow-upward" color="#80AEF7" size="35"></u-icon>点击上传
								</view>
							</view>
							<view>
								<view class="file_path_lists" v-for="item in fileListPath">
									<view class="filesName">{{item.name}}</view>
									<u-icon name="close-circle" color="#82848a" size="28" @click="removeFile(item)">
									</u-icon>
								</view>
								<u-button :disabled="btnDisabled" :type="btntype" shape="circle" size="medium" plain
									@click="chooseFile">选择文件
								</u-button>
							</view>
						</view>
						<view class="pos">
							<button @click="confirmApplyFor()" class="submit">提交申请</button>
						</view>
					</view>
				</form>
			</view>
			<view style="color: #c8c9cc;text-align: center;margin-top: 50rpx;">
				移除图片时，请重新上传
				<u-icon name="info" color="#c8c9cc" size="28"></u-icon>
				<u-icon name="info" color="#c8c9cc" size="28"></u-icon>
				<u-icon name="info" color="#c8c9cc" size="28"></u-icon>
			</view>
		</view>
		<!-- 派发人员选择器 -->
		<u-select v-model="personnelDispatch" :list="selectList" @confirm="selectConfirm"></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				action: "https://oa.sdbaizhi.com/api/oss",
				addressData: {
					description: "", //描述
					money: "", //金额
					imgPaths: [], //图片
					uploadfile: [], //文件
					title: "" //标题
				},

				filesList: [], //所选择的图片
				fileListPath: [], //所选择的文件 
				btnDisabled: false, //是否禁用按钮
				btntype: "primary", //选择文件按钮的样式

				app_id: '', //分区 - 各自申请各自显示
				navbarTitle: '', //页面标题

				personnelDispatch: false, //派发人员选择器
				selectList: [ //派发人员数据
					{
						value: '1',
						label: '全部'
					},
					{
						value: '2',
						label: '张三'
					}
				],
			}
		},
		onLoad(e) {
			this.app_id = e.id
			this.navbarTitle = e.title + '列表'
		},
		methods: {
			selectConfirm(e) { //派发人员
				console.log(e[0], 'selectConfirm');
			},
			choosePicture() { //选择图片事件
				uni.chooseImage({
					count: 6, //默认9
					success: (res) => {
						this.filesList = res.tempFilePaths
						console.log(this.filesList, 'this.filesList');
					}
				});
			},
			previewImage() { //预览所选择的图片
				uni.previewImage({
					urls: this.filesList,
				});
			},
			deleteImage(item) { //删除所选择的图片
				uni.showModal({
					title: "删除",
					content: "是否取消上传该图片!",
					success: (res) => {
						if (res.confirm) {
							this.filesList = this.filesList.filter(item2 => {
								return item != item2
							})
						}
					}
				})
			},
			submitImage() { //上传图片
				uni.showLoading({
					title: "上传中...",
					mask: true
				})
				if (this.filesList.length != 0) {
					this.filesList.forEach((item) => {
						uni.uploadFile({
							url: this.action,
							name: 'image',
							filePath: item,
							header: {
								token: uni.getStorageSync('token')
							},
							// FormData: {
							// 	image: item.url,
							// 	path: item.name,
							// },
							success: (res) => {
								let res1 = JSON.parse(res.data)
								console.log(res1, 'res1');
								if (res1.code == 0) {
									this.addressData.imgPaths.push(res1.data.accessUrl)
								}
								if (this.filesList.length == this.addressData.imgPaths.length) {
									uni.hideLoading()
									uni.showToast({
										title: "上传成功！",
										icon: "none",
										duration: 1000
									})
								}
							},
							fail() {
								uni.hideLoading()
								uni.showToast({
									title: "上传失败，请重新上传！",
									icon: "none",
									duration: 1000
								})
							}
						})
					})
				} else {
					uni.hideLoading()
					uni.showToast({
						title: "还没选择图片！",
						icon: "none"
					})
				}
			},
			chooseFile() { //选择文件
				uni.chooseMessageFile({
					count: 6,
					success: (res) => {
						this.fileListPath = res.tempFiles
					}
				})
			},
			removeFile(e) { //删除文件
				uni.showModal({
					title: "删除",
					content: "是否取消上传该文件!",
					success: (res) => {
						if (res.confirm) {
							this.fileListPath = this.fileListPath.filter((item) => {
								return item.name != e.name
							})
						}
					}
				})
			},
			subFile() { //文件上传
				uni.showLoading({
					title: "上传中...",
					mask: true
				})
				if (this.fileListPath.length != 0) {
					this.fileListPath.forEach((item) => {
						uni.uploadFile({
							url: this.action,
							name: 'file',
							filePath: item.path,
							header: {
								token: uni.getStorageSync('token'),
							},
							formData: {
								file: item.path,
								path: item.name,
							},
							success: (res) => {
								let res1 = JSON.parse(res.data)
								if (res1.code == 0) {
									this.addressData.uploadfile.push(res1.data.accessUrl)
									if (this.fileListPath.length == this.addressData.uploadfile
										.length) {
										uni.hideLoading()
										uni.showToast({
											title: "上传成功！",
											icon: "none",
											duration: 1000
										})
									}
								}
							},
							fail() {
								uni.hideLoading()
								uni.showToast({
									title: "上传失败，请重新上传！",
									icon: "none",
									duration: 1000
								})
							}
						})
					})
				} else {
					uni.showToast({
						title: "请先选择图片！",
						icon: "none"
					})
				}
			},
			IntInput(e) { //金额输入限制
				const o = e.target;
				const inputRule = /[^\d.]/g //修改inputRule 的值
				this.$nextTick(function() {
					this.addressData.money = o.value.replace(inputRule, '');
				})
			},
			submitFunction() { //提交申请功能，，需要调用
				uni.showLoading({
					title: "提交申请中",
					mask: true
				})
				setTimeout(() => {
					uni.hideLoading()
					if (this.app_id == 4 || this.app_id == 5 || this.app_id == 13) { //财务类
						if (this.addressData.title == '' && this.addressData.description == '' && this.addressData
							.money == '') {
							uni.showToast({
								title: "还有内容没有填写！",
								icon: "none"
							})
						} else {
							this.$http(this.$api.subApplication, {
								desc: this.addressData.description, //描述
								money: this.addressData.money, //金额
								title: this.addressData.title, //标题
								apply_title: this.addressData.title, //标题
								img_path: this.addressData.imgPaths, //图片
								file_path: this.addressData.uploadfile, //文件
								app_id: this.app_id
							}).then(res => {
								// console.log(res);
								uni.navigateBack()
							})
						}
					} else { //非财务类
						if (this.addressData.title == '' && this.addressData.description == '') {
							uni.showToast({
								title: "还有内容没有填写！",
								icon: "none"
							})
						} else {
							this.$http(this.$api.subApplication, {
								desc: this.addressData.description, //描述
								money: this.addressData.money, //金额
								title: this.addressData.title, //标题
								apply_title: this.addressData.title, //标题
								img_path: this.addressData.imgPaths, //图片
								file_path: this.addressData.uploadfile, //文件
								app_id: this.app_id
							}).then(res => {
								// console.log(res);
								uni.navigateBack()
							})
						}
					}
				}, 1000)
			},
			confirmApplyFor() { //提交申请
				if (this.filesList.length != this.addressData.imgPaths.length) {
					uni.showToast({
						title: "图片还未上传！",
						icon: "none"
					})
				} else if (this.fileListPath.length != this.addressData.uploadfile.length) {
					uni.showToast({
						title: "文件还未上传！",
						icon: "none"
					})
				} else {
					this.submitFunction()
				}
			},
			showHidePrompt() {
				uni.showModal({
					title: "提示",
					content: "txt文件、ppt文件拒绝上传",
					showCancel: false
				})
			},
		},
		watch: {
			fileListPath() { //监视文件数量状态 - 如删除上传的其中之一，清空addressData内要提交的文件
				if (this.fileListPath.length == 6) {
					this.btnDisabled = true
					this.btntype = "default"
				} else {
					this.addressData.uploadfile = []
					this.btnDisabled = false
					this.btntype = "primary"
				}
			},
			filesList() { //监视上传图片的数量
				if (this.filesList.length != this.addressData.imgPaths.length) {
					this.addressData.imgPaths = []
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.limit {
		color: #c8c9cc;
		font-size: 25rpx;
		letter-spacing: 3rpx;
		position: relative;
		width: 43%;
		text-align: center;

		>u-icon {
			margin-left: 5rpx;
		}
	}

	/* 图片展示区域 */
	.pictures_show {
		display: flex;
		flex-wrap: wrap;
	}

	.pictures_show>view {
		background-color: #F4F5F6;
		width: 32%;
		height: 200rpx;
		margin: 0 1% 10rpx 0;
	}

	.six_view_img {
		position: relative;
	}

	.six_view_img>image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.six_view_img>u-icon {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
	}

	.choose_picture {
		color: #606266;
		font-size: 33rpx;
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	.mandatory {
		position: relative;
	}

	.mandatory>span {
		position: absolute;
		top: 3rpx;
		left: 0;
	}

	.mandatory>text {
		margin-left: 25rpx;
	}

	.distributed {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	u-button {
		margin-top: 30rpx;
		display: block;
		text-align: center;
	}

	.filesName {
		font-size: 25rpx;
		color: #82848a;
		margin-left: 47rpx;
		line-height: 50rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.file_path_lists {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	* {
		padding: 0;
		margin: 0;
	}

	.content {
		padding: 10px;
		font-size: 14px;
	}

	.content_box {
		box-shadow: 0px 0px 6px #DCDCDC;
		border-radius: 5px;
		padding: 10px;
	}

	.list {
		font-size: 32rpx;
	}

	.one {
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.flex {
		display: flex;
	}

	.subImg {
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.image {
		background: #fff;
		align-content: center;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.picture {
		padding-bottom: 20rpx;
		/* padding-left: 33rpx; */
		padding-left: 3rpx;
	}

	/deep/.u-list-item.data-v-49deb6f2 {
		margin: 0rpx;
	}

	.style {
		padding-left: 20rpx;
	}

	input {
		width: 75%;
	}

	button {
		width: 150px;
		background-color: #fff;
		border: 1px solid #eee;
		color: #606266;
	}

	.but {
		margin-right: 130px;
		width: 150px;
	}

	.submit {
		bottom: 0;
		width: 180px;
		border-radius: 40px;
		border: 1px solid #80b0ff;
		color: #2979ff;
		background-color: rgba(153, 204, 255, 0.1);
	}

	u-upload {
		width: 510rpx !important;
	}

	.name {
		display: flex;
		justify-content: left;
	}

	.uni-list {
		padding-left: 10px;
	}

	.container {
		position: relative;
		height: 97vh;
	}

	.pos {
		position: absolute;
		bottom: 0;
		left: 199rpx;
	}

	.red {
		color: red;
	}

	.Colorless {
		color: #fff;
	}
</style>
